<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>考题管理</title>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <link rel="stylesheet" href="./css/common.css">
    <!-- import Vue before Element -->
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <!-- import JavaScript -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script src="./js/common.js"></script>
</head>
<style>
    .search-bar {
        margin-bottom: 20px;
    }

    .search-bar .title {
        padding: 5px 10px;
        border-left: 2px solid #409EFF;
        margin-bottom: 5px;
    }
</style>
<body>
<div id="app">
    <el-row>
        <el-col :span="14" :offset="5">
            <div class="container">
                <div class="button-bar">
                    <div class="checkbox-bar">
                        <el-upload
                                class="upload-demo"
                                action="./questions/t-questions/uploadQuestions"
                                :on-success="handleSuccess">
                            <el-button size="small" type="primary">点击上传</el-button>
                        </el-upload>
                    </div>
                    <div class="return-btn" title="返回主页" @click="returnHome">
                        <el-button type="warning" size="small" plain>
                            <i class="el-icon-back"></i>
                        </el-button>
                    </div>
                </div>
                <div class="search-bar">
                    <div class="title">搜索栏</div>
                    <el-form ref="form" :model="searchForm" label-width="80px"
                             style="display: flex;align-items: center;justify-content: flex-start;">
                        <el-input v-model="searchForm.quesContent" style="width: 200px;" placeholder="请输入考题内容">
                        </el-input>
                        <el-button type="primary" @click="getList" icon="el-icon-search"
                                   style="margin-left: 20px;"></el-button>
                    </el-form>
                </div>
                <el-table
                        :data="list"
                        style="width: 100%">
                    <el-table-column
                            type="index"
                            :index="startIndex">
                    </el-table-column>
                    <el-table-column
                            prop="quesContent"
                            label="考题内容">
                    </el-table-column>
                    <el-table-column label="答案">
                        <el-table-column
                                prop="right"
                                label="正确答案">
                        </el-table-column>
                        <el-table-column
                                prop="wrong"
                                label="错误答案（多个）">
                        </el-table-column>
                    </el-table-column>
                    <el-table-column
                            prop="analysis"
                            label="解析">
                    </el-table-column>
                    <el-table-column
                            fixed="right"
                            label="操作"
                            width="100">
                        <template slot-scope="scope">
                            <el-button @click="handleEdit(scope.row)" size="small">编辑</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <div class="pagination">
                    <el-pagination
                            background
                            layout="prev, pager, next"
                            :total="total"
                            @current-change="handleCurrentChange">
                    </el-pagination>
                </div>
            </div>
        </el-col>
    </el-row>
</div>
</body>
<script>
    new Vue({
        el: '#app',
        data: function () {
            return {
                list: [],

        : 1,
                size: 10,
                startIndex: 1,
                total: 0,
                searchForm: {}
            }
        },
        methods: {
            // 上传成功回调函数
            handleSuccess(response, file, fileList) {
                console.log(response);
                console.log(file);
                console.log(fileList);
                alert(response.message)
            },
            // 获取列表
            getList() {
                const loading = showLoading(this);

                // 查看缓存中是否有查询条件
                const quesSearchCondition = sessionStorage.getItem("quesSearchCondition");
                if (quesSearchCondition) {
                    this.searchForm = JSON.parse(quesSearchCondition);
                    sessionStorage.removeItem("quesSearchCondition");
                }

                axios({
                    url: '/questions/t-questions/list',
                    method: 'get',
                    params: {
                        pagination: this.pagination,
                        size: this.size,
                        searchData: encodeURI(JSON.stringify(this.searchForm))
                    }
                }).then(res => {
                    loading.close();
                    const data = res.data;
                    this.list = data.model.records;
                    this.startIndex = (this.pagination - 1) * 10 + 1;
                    this.total = data.model.total
                }).catch(error => {
                    loading.close();
                    console.log(error)
                })
            },
            handleCurrentChange(val) {
                this.pagination = val;
                this.getList()
            },
            handlePrevClick() {
                this.pagination -= 1;
                this.getList()
            },
            handleNextClick() {
                this.pagination += 1;
                this.getList()
            },
            // 跳转到编辑页
            handleEdit(row) {
                // 将查询条件加入缓存
                sessionStorage.setItem("quesSearchCondition", JSON.stringify(this.searchForm));

                window.location.href = `./questionEdit.html?id=${row.id}`
            },
            returnHome() {
                window.location.href = `./index.html`
            }
        },
        mounted: function () {
            this.getList()
        },
    })
</script>
</html>